import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import {
  WingBlank, WhiteSpace, Flex,
  List, InputItem, Button, Toast,
} from 'antd-mobile';
import { createForm } from 'rc-form';

// TODO:页面实现
// 接口：department

const DepartPage = ({ dispatch, form, location, btn, backGround, clock, wait, isDisabled, ...rest }) => {
  const { getFieldProps, getFieldError, validateFields } = form;
  const signin = () => validateFields((errors, value) => {
    if (errors) {
      const fieldNames = Object.keys(errors);
      if (fieldNames[0]) {
        return Toast.fail(getFieldError(fieldNames[0]));
      }
    }

    dispatch({
      type: 'account/signin',
      payload: {
        ...value,
        openid: location.query.openid,
      },
    });
  });
  const signup = () =>{
       dispatch(
          routerRedux.push({
            pathname: `/signup`,
            state: { title: '注册', type: 'regist' },
          }),
        );
       btn = "获取验证码";
       backGround = "#aa4929";
       clearInterval(clock);
       isDisabled = false;
       wait = 60;
       dispatch({ 
        type: 'account/save', 
        payload: { btn: btn, 
          backGround: backGround,
          wait:wait,clock:clock, 
          isDisabled: isDisabled
       }});
    }

    const forgot = () => {
       dispatch(
           routerRedux.push({
            pathname: `/forgot`,
             state: { title: '找回密码', type: 'update'},
          }),
       );
        btn = "获取验证码";
        backGround = "#aa4929";
        clearInterval(clock);
        isDisabled =false;
        wait = 60;
        dispatch({ 
          type: 'account/save', 
          payload: { btn: btn, 
            backGround: backGround,
            wait:wait,clock:clock, 
            isDisabled: isDisabled
        }});
    }
  return (
    <WingBlank size="md">
      <WhiteSpace size="xl" />
      <List>
        <InputItem
          {...getFieldProps('user', {
            validate: [{
              trigger: false,
              rules: [{ required: true, message: '请输入手机号码' }],
            }],
          })}
          placeholder="请输入手机号码">账号：</InputItem>
        <InputItem
          {...getFieldProps('pass', {
            validate: [{
              trigger: false,
              rules: [{ required: true, message: '请输入密码' }],
            }],
          })}
          type="password"
          placeholder="请输入密码">密码：</InputItem>
      </List>
      <WhiteSpace size="xl" />
      <Button
        type="primary"
        onClick={signin}>立即登录
      </Button>
      <WhiteSpace size="xl" />
      <Flex>
        <Flex.Item>
            <div onClick={signup} style={{color: '#aa4929'}}>免费注册</div>
        </Flex.Item>
        <Flex.Item>
          <Flex justify="end">
            <div onClick={forgot} style={{color: '#aa4929'}}>忘记密码？</div>
          </Flex>
        </Flex.Item>
      </Flex>
    </WingBlank>
  );
};

export default connect(({ account }) => ({
  ...account,
}))(createForm()(DepartPage));
